<template>
  <div class="holidayPartyList">
    <x-header class="header" :left-options="{showBack: showHeaderBack}" ref="header">节日/派对列表</x-header>
    <div class="topHolder"></div>
    <box gap="1rem 0.8rem">
      <div class="HPlist" v-for="(item,index) in holidayPartyList" :key="index" @click="goToDetail(item.HOLIDAYPARTY_ID)">
        <masker style="border-radius: 2px;" :opacity="0.7">
          <div class="img" :style="{backgroundImage: 'url(' + contextPath + item.IMAGE + ')'}"></div>
          <div slot="content" class="title">
            {{item.PARTY_NAME}}
            <br/>
            <span class="time" v-text="item.START_DATETIME + ' 至 ' + item.END_DATETIME"></span>
          </div>
        </masker>
      </div>
      <div class="listNoItem" v-if="holidayPartyList.length <= 0">暂无派对</div>
    </box>
  </div>
</template>

<script>
  import { Box, Masker } from 'vux'
  import {contextPath,getHolidayPartyList} from "../../api";
  import {message} from "../../common/util";

  export default {
    name:'holidayPartyList',
    data(){
      return{
        contextPath:contextPath,
        showHeaderBack:this.GLOBAL.showHeaderBack,
        holidayPartyList: []
      }
    },
    components:{
      Box,
      Masker
    },
    computed:{

    },
    methods:{
      goToDetail(id){
        this.$router.push({name:'节日/派对详情',params:{holidayPartyId:id}})
      }
    },
    mounted(){
      getHolidayPartyList().then((res)=>{
        if(res.status == 'success'){
          this.holidayPartyList = res.data
        }else if(res.status == 'error') {
          message({message:res.msg,type:'error'})
          console.log('getHolidayPartyList error info:', res.msg)
        }
        this.$store.commit('updateLoadingStatus',{isLoading:false})
      }).catch((err)=>{console.log('getHolidayPartyList catch info:',err)})
    }
  }
</script>

<style lang="scss" scoped>
  .holidayPartyList{
    .HPlist{
      margin: 1rem 0;overflow: hidden;
      .img {padding-bottom: 33%;display: block;position: relative;max-width: 100%;background-size: cover;background-position: center center;cursor: pointer;border-radius: 2px;}
      .title {color: #fff;text-align: center;text-shadow: 0 0 2px rgba(0, 0, 0, .5);font-weight: 500;font-size: 16px;position: absolute;left: 0;right: 0;width: 100%;text-align: center;top: 50%;transform: translateY(-50%);}
      .time {font-size: 12px;padding-top: 4px;border-top: 1px solid #f0f0f0;display: inline-block;margin-top: 5px;}
    }
    
  }
</style>
